<script lang="tsx">
/* 这份文件是使用了tsx渲染函数来书写,vue上是可以使用渲染函数来表示的,真的是全部练手了 */

import { computed, defineComponent } from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1570300_zwupv8bc2lp.js', // 在 iconfont.cn 上生成
});

// 由于连上了外部阿里的图标库,所以他的开头好像是icon-啥的
const iconPrefix = 'icon-';
const fallbackIcon = 'home';

export default defineComponent({
  name: 'IconSvg',
  inheritAttrs: false,
  // props验证一波
  props: {
    icon: {
      type: String,
    },
    size: {
      type: Number,
    },
    // 单色图标有用
    color: {
      type: String,
      default: '',
    },
  },
  setup(props, { attrs }) {
    const iconType = computed(() => {
      return `${iconPrefix}${props.icon || fallbackIcon} `;
    });
    return () => (
      <MyIcon
        class="icon-svg"
        type={iconType.value}
        style={{
          fontSize: props.size && `${props.size}px`,
          color: props.color,
        }}
        {...attrs}
      />
    );
  },
});
</script>

<style lang="scss" scoped>
.icon-svg {
  font-size: 16px;
}
// + 代表相邻元素选择器，选择紧挨着某个元素的元素
.icon-svg + .icon-svg {
  margin-left: 10px;
}
</style>
